<script setup lang='tsx' name='Login'>
import type { LoginDto } from '@/types';
import { loginApi } from '@/api';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
const formRef = ref<FormInstance | null>(null)
const form = reactive<LoginDto>({
    username: 'lisi',
    password: '222222'
})
const rules = reactive<FormRules<LoginDto>>({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
    ]
})
async function login() {
    await formRef.value!.validate()
    const { data, msg } = await loginApi(form)
    ElMessage.success({ message: msg })
    console.log(data.userInfo.nickName);
}
</script>

<template>
    <div class='login-container h-100vh flex justify-center items-center'>
        <div class='login-form w-400px'>
            <h1 class='text-center font-bold text-size-30px mb-30px'>xxxx预定系统</h1>
            <el-form ref="formRef" style="max-width: 600px" :model="form" :rules="rules" label-width="auto"
                class="demo-ruleForm" status-icon>
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="form.username" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="form.password" type="password" />
                </el-form-item>
                <el-row justify="space-between">
                    <el-col :span="1.5">
                        <el-button link type="primary" @click="$router.push('/register')"> 创建账号</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button link type="primary">忘记密码</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <el-button type="primary" class="w-full mt-10px" @click="login">登录</el-button>
        </div>
    </div>
</template>

<style lang='scss' scoped></style>